<template>
    <h2>客户订单列表</h2>
     <!-- 查询表单 -->
     <el-form :model="condForm" inline class="mb-4">
      <el-form-item label="订单编号">
        <el-input v-model="condForm.id" placeholder="请输入订单编号" clearable />
      </el-form-item>
      <el-form-item label="客户姓名">
        <el-input v-model="condForm.custName" placeholder="请输入客户姓名" clearable />
      </el-form-item>
      <el-form-item label="商品名称">
        <el-input v-model="condForm.itemName" placeholder="请输入商品名称" clearable />
      </el-form-item>
      <el-form-item label="订单状态">
        <el-select v-model="condForm.state" placeholder="请选择订单状态" clearable>
          <el-option label="待支付" value="1" />
          <el-option label="已支付" value="2" />
          <el-option label="已完成" value="3" />
          <el-option label="已取消" value="4" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>


    <el-table :data="orderList" stripe style="width: 100%">
    <el-table-column prop="id" label="订单编号" width="180" />
    <el-table-column prop="custName" label="客户姓名" width="180" />
    <el-table-column prop="itemName" label="商品名称" />
    <el-table-column prop="orderDate" label="订单时间" />
    <el-table-column prop="state" label="订单状态" />
    <el-table-column prop="num" label="数量"/>
    <el-table-column prop="pay" label="支付方式"  :formatter="formatPay">
 
        </el-table-column>

    <el-table-column prop="payMoney" label="支付金额"/>
    <el-table-column fixed="right" label="Operations" min-width="120">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="delCust(scope.row)">
         删除
        </el-button>
        <el-button link type="primary" size="small" @click="openCustVisible(scope.$index,scope.row)">修改</el-button>
      </template>
    </el-table-column>``
  </el-table>
  <hr/>

  <el-pagination
    size="small"
    background
    layout="prev, pager, next"
    :page-size="3"
    :pager-count="10"
    :total="total"
    class="mt-4"
    @current-change="handlerPageChange"
  />
  </template>
  
  <script setup>
  import { onMounted } from "vue";
import { ref } from 'vue';
import axios from 'axios';
import { reactive } from 'vue'
import { ElMessage } from 'element-plus'; // 添加此行


const total=ref();
 const orderList=ref([]);
function orderListPage(condForm){
    axios.post("http://localhost:8081/OrderPageQuery",condForm)
    .then(response=>{orderList.value=response.data.recordList;
    total.value=response.data.total})
    .catch((error)=>{
    console.log(error);
  })
}
 
  onMounted(function(){
    condForm.pageNum = 1;
    orderListPage(condForm);
  }
  )
//声明保存查询条件的表单数据
const condForm=reactive({
  id:null,
  state:null,
  custName:null,
  itemName:null,
  pageNum:1,
  pageSize:3
})
function handlerPageChange(value){
condForm.pageNum=value;
orderListPage(condForm);
}

// 定义支付方式映射表
const PAY_METHODS = {
  1: '微信支付',
  2: '支付宝',
  3: '银行卡',
  4: '现金',
};

// 格式化支付方式
const formatPay = (row) => {
  return PAY_METHODS[row.pay] || '未知支付方式';
};

function search(){
    condForm.pageNum=1; //将原来页码重置为1
    orderListPage(condForm);

}

function reset(){
    condForm.id=null;
condForm.state=null;
condForm.custName=null;
condForm.itemName=null;
orderListPage(condForm);


}

  </script>
  
  <style scoped>
  
  </style>